import clsx from "clsx";
import Link from "next/link";
import { ReactNode } from "react";

export function UiHeader({
    className,
    right,
    title,
    backButton,
    backUrl
}: {
    className?: string;
    title: string
    right?: ReactNode;
    backButton?: boolean
    backUrl?: string
}) {
    return (
        <header
            className={clsx(
                'px-4 z-40 w-full h-14 flex justify-between items-center bg-white shadow-md', // Enhanced styling
                className
            )}
        >
            <div className='flex items-center gap-4'>

                {backButton && backUrl && (
                    <Link
                        className="inline-flex items-center justify-center rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white"
                        href={backUrl}
                    >
                        <svg className="w-5 h-5 " viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" aria-hidden="true">
                            <path d="M15 18l-6-6 6-6" />
                        </svg>
                        <span className="ml-2">Назад</span>
                    </Link>
                )}
                <h1 className="text-xl font-medium">{title}</h1>
            </div>
            {right}
        </header>
    );
}